<template>
    <el-row :gutter="20" style="margin-top: 10px;">
        <el-col :span="12" :offset="0">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>关键词搜索</span>
                    </div>
                </template>
                <div class="clearFix">
                    <div style="float: left; margin-left:20px">
                        <div>搜索用户数</div>
                        <div>11111</div>
                        <div class="box" ref="linePic">折线图</div>
                    </div>
                    <div style="float: right; margin-right:20px">
                        <div>搜索量</div>
                        <div>22222</div>
                        <div class="box" ref="linePic1">折线图</div>
                    </div>
                </div>
                <!-- table表格 -->
                <el-table :data="arr" border stripe style="margin-top: 10px">
                    <el-table-column label="排名">
                        <template #="{ row, $index }">
                            {{ (currentPage - 1) * pageSize + $index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="关键字" prop="word"> </el-table-column>
                    <el-table-column label="搜索数量" prop="count"> </el-table-column>
                    <el-table-column label="搜索用户" prop="user"> </el-table-column>
                    <el-table-column label="搜索占比">
                        <template #="{ row, $index }">
                            {{ parseInt((row.user / row.count) * 100) + "%" }}
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    layout="prev, pager, next" :total="45" background>
                    :pager-count="7">
                </el-pagination>
            </el-card>
        </el-col>
        <el-col :span="12" :offset="0">
            <el-card class="box-card" >
                <template #header>
                    <div class="card-header">
                        <span>分类销售</span>
                        <el-radio-group v-model="radio" size="small">
                            <el-radio-button label="品类" />
                            <el-radio-button label="商品" />
                        </el-radio-group>
                    </div>
                </template>
                <v-chart style="height: 371px" :option="pieOption()" @mouseover="overHandler" autoresize></v-chart>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, reactive } from 'vue'
import * as echarts from 'echarts'
let linePic = ref()
let linePic1 = ref()
let myChart
let myChart1
let arrU = ref()
let arrU1 = ref()
let arrWord = ref()
//单选按钮绑定的数据
let radio = ref("品类");
onMounted(() => {
    console.log(linePic.value);
    myChart = echarts.init(linePic.value)
    myChart.setOption(option())
    myChart1 = echarts.init(linePic1.value)
    myChart1.setOption(option1())
    console.log(props.searchWord);

})
const option = () => {
    return {
        title: {
            // text:'折线图'
        },
        xAxis: {
            // x轴均分
            type: 'category',
            // 坐标两侧不留白
            boundaryGap: false,
            // 隐藏x轴
            show: false,
            data: arrWord.value
        },
        yAxis: {
            // 隐藏y轴
            show: false,
        },
        series:
        {
            data: arrU.value,
            type: 'line',
            // 平滑曲线
            smooth: true,
            // 拐点形状
            label: {
                show: false
            },
            // 拐点样式
            itemStyle: {
                // color:'white'
                // 透明度
                opacity: 0
            },
            // 填充区颜色
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0, color: 'white' // 0% 处的颜色
                        },
                        {
                            offset: 1, color: 'white' // 100% 处的颜色
                        }
                    ],
                    // 缺省为false
                    global: false
                }
            },
            // 线条颜色
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'yellow' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            // 调整图标的布局
        },
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            // show: true,
            //图标底层的颜色
            // backgroundColor: {
            //     type: "linear",
            //     x: 0,
            //     y: 0,
            //     x2: 0,
            //     y2: 1,
            //     colorStops: [
            //         {
            //             offset: 0,
            //             color: "aqua", // 0% 处的颜色
            //         },
            //         {
            //             offset: 1,
            //             color: "white", // 100% 处的颜色
            //         },
            //     ],
            //     global: false, // 缺省为 false
            // },
        },
        //提示插件
        tooltip: {
            trigger: 'axis',
            //限制展示区域，在容器内部
            confine: true
        }
    }
}

const option1 = () => {
    return {
        title: {
            // text:'折线图'
        },
        xAxis: {
            // x轴均分
            type: 'category',
            // 坐标两侧不留白
            boundaryGap: false,
            // 隐藏x轴
            show: false,
            data: arrWord.value
        },
        yAxis: {
            // 隐藏y轴
            show: false,
        },
        series:
        {
            data: arrU1.value,
            type: 'line',
            // 平滑曲线
            smooth: true,
            // 拐点形状
            label: {
                show: false
            },
            // 拐点样式
            itemStyle: {
                // color:'white'
                // 透明度
                opacity: 0
            },
            // 填充区颜色
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0, color: 'white' // 0% 处的颜色
                        },
                        {
                            offset: 1, color: 'white' // 100% 处的颜色
                        }
                    ],
                    // 缺省为false
                    global: false
                }
            },
            // 线条颜色
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'yellow' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            // 调整图标的布局
        },
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            // show: true,
            //图标底层的颜色
            // backgroundColor: {
            //     type: "linear",
            //     x: 0,
            //     y: 0,
            //     x2: 0,
            //     y2: 1,
            //     colorStops: [
            //         {
            //             offset: 0,
            //             color: "aqua", // 0% 处的颜色
            //         },
            //         {
            //             offset: 1,
            //             color: "white", // 100% 处的颜色
            //         },
            //     ],
            //     global: false, // 缺省为 false
            // },
        },
        //提示插件
        tooltip: {
            trigger: 'axis',
            //限制展示区域，在容器内部
            confine: true
        }
    }
}


let props = defineProps(['searchWord'])
//当前第几页
let currentPage = ref<number>(1);
let pageSize = ref<number>(5);
let arr = ref([]);
//监听数据的变化
watch(
    () => props.searchWord,
    () => {
        arr.value = props.searchWord.slice(0, 5);
        console.log(arr.value);
    }
);

//监听当前页码变化
watch(currentPage, () => {
    let start = (currentPage.value - 1) * pageSize.value;
    let end = start + 5;
    arr.value = props.searchWord.slice(start, end);
});
//饼图将来需要展示的数据
let pie1Arr = ref([
    { name: "北京烤鸭", value: 999 },
    { name: "狗不理", value: 123 },
    { name: "锅包肉", value: 12 },
    { name: "拍黄瓜", value: 66 },
    { name: "杀猪菜", value: 122 },
    { name: "饸饹面", value: 6 },
]);

let pie2Arr = ref([
    { name: "北京", value: 666 },
    { name: "南京", value: 233 },
    { name: "燕京", value: 122 },
    { name: "东京", value: 16 },
    { name: "吴京", value: 222 },
    { name: "戏精", value: 126 },
]);


//存储饼图中间需要展示的数据
let pieObj = reactive({
    // name: "北京",
    // value: 999
})
//饼图配置项
const pieOption = () => {
    return {
        //标题
        title: {
            //主标题
            text: pieObj.name,
            //子标题
            subtext: pieObj.value,
            left: "30%",
            top: "47%",
            //文字居中
            textAlign: "center",
            //主标题的样式
            textStyle: {
                color: 'yellowgreen'
            },
            //副标题
            subtextStyle: {
                color: 'yellowgreen'
            }
        },
        //提示框
        tooltip: {
            trigger: "item",
        },
        //图例组件
        legend: {
            top: "40%",
            right: "0",
            //图例的方向
            orient: "vertical",
        },
        //系列:柱状图
        series: [
            {
                //系列之饼图
                type: "pie",
                //饼图宽度
                width: 350,
                //半径参数
                radius: ["30%", "60%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: "#ccc",
                    borderWidth: 2,
                },
                label: {
                    show: true,
                    color: 'yellowgreen'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontWeight: "bold",
                        fontSize: 14,
                    },
                },
                labelLine: {
                    show: true,
                },
                data: radio.value == "品类" ? pie1Arr.value : pie2Arr.value,
            },
        ],
        grid: {
            left: 0,
        },
    };
};
//饼图的鼠标进入事件
const overHandler = (item) => {
    //重新赋值
    pieObj.name = item.data.name;
    pieObj.value = item.data.value;
}




watch(() => props.searchWord, () => {
    console.log(props.searchWord);
    arrU.value = props.searchWord.map((item) => {
        return item.user
    })
    arrU1.value = props.searchWord.map((item) => {
        return item.count
    })
    arrWord.value = props.searchWord.map((item) => {
        return item.word
    })
    console.log(arr.value);
    myChart.setOption(option())
    myChart1.setOption(option1())
    console.log(props.searchWord);
})
</script>

<style scoped>
.clearFix::after {
    content: "";
    display: block;
    clear: both;
}

.box {
    width: 260px;
    height: 50px;
    /* border: none; */
    border-bottom: 1px solid #ccc;

}
.card-header {
  display: flex;
  justify-content: space-between;
}
.clearFix {
    zoom: 1;
}
</style>